<!-- 文件模板 -->
<template>
	<view class="fileItemWrap">
		<view class="file_items">
			<view class="left">
				<image :src="`../../static/icon/${iconImg}.png`" mode=""></image>
				<view class="content">
					<text v-if="fileName" class="fileName">{{fileName}}</text>
					<text v-show="false">共{{pageNum}}页 | 
					<template v-if="isShowDate">
					{{timeDate}}
					</template>
					<template v-else>
					{{saveCapacity}}
					</template>
					</text>
				</view>
			</view>
			<image src="../../static/icon/arrow_right.png" mode=""></image>
		</view>
		<view class="isNeedReceipt" :class="{alreadyRead:isRead === '1'}" v-if="['AdministrativeAgencies','BureauOfJustice'].includes(roleInfo) && !isReceipt">
			{{isRead === '1' ? '已阅读' : '未阅读'}}
		</view>
	</view>
</template>

<script setup>
import {defineProps, watch,ref} from 'vue'
import {getSaveRole} from '@/utils/auth.js'
const roleInfo =ref(getSaveRole()) 
const props = defineProps({
	fileName:{
		type:String,
		default:""
	},
	fileType:{
		type:String,
		required:true
	},
	timeDate:{
		type:String,
		default:""
	},
	saveCapacity:{
		type:String,
		default:""
	},
	isShowDate:{
		type:Boolean,
		default:true
	},
	pageNum:{
		type:Number,
		default:0
	},
	isNeedReceipt:{
		type:String,
		default:""
	},
	isRead:{
		type:String,
		default:"0"
	},
	isReceipt:{
		type:Boolean,
		default:true
	}
})
const iconImg = ref(null)
const emun = {
	"png":"pngIcon",
	"word":"wordIcon",
	"ofd":"ofdIcon",
	"jpg":"jpgIcon",
	"pdf":"pdfIcon",
	"docx":"docxIcon"
}
watch(()=>props.fileType,(val)=>{
iconImg.value = emun[val.replace(/^\./, "")]
},{
	deep:true,
	immediate:true
})
const alradyRedsucess = ()=>{
	uni.redirectTo({
		url:`/pages/signatureBrand/signatureBrand?deliveryId=${deliverIdVal.value}`
	})
}
// const isReadFun = ()=>{
//  if(roleInfo.value === 'BureauOfJustice' &&  props.isRead === '1') {
	 
//  }else{
	
//  }
// }
</script>

<style lang="scss" scoped>
	.fileItemWrap{
		position: relative;
		margin-bottom: 32rpx;
		.file_items{
				height: 140rpx;
				background: #FCFCFE;
				border-radius: 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				.left{
					display: flex;
					align-items: center;
					>image{
					width: 56rpx;
					height: 56rpx;	
					}
					.content{
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						text{
							&:first-child{
								font-weight: 600;
								font-size: 28rpx;
								color: #00041A;
								margin-bottom: 10rpx;
							}
							&:last-child{
								font-weight: 400;
								font-size: 24rpx;
								color: #BBC0C9;
							}
						}
						.fileName{
							max-width: 450rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
		
				}
				>image{
					width:30rpx;
					height: 30rpx;
				}
			}
			.isNeedReceipt{
				position: absolute;
				right: 0;
				top: 0;
				background-color: #ffdfd9;
				font-size: 20rpx;
				color: #ff573b;
				border-radius: 10rpx;
				height: 30rpx;
				line-height: 30rpx;
				padding:0 10rpx;
			
			}
			.toRecipt{
				position: absolute;
				bottom: 0;
			}
	}
	.alreadyRead{
		color:  #24C69E !important;
		background-color: #DFF7F1 !important;
	}

</style>